<template>
  <div>
    <el-row>
      <el-col :span="6">
        <pie-chart :chart-data="pieData" />
      </el-col>
      <el-col :span="18">
        <el-row :gutter="20" style="width: 700px;">
          <el-col :span="12">
            <div>
              <el-statistic
                group-separator=","
                :precision="2"
                decimal-separator="."
                :value="value1"
                :title="title"
              >
                <template slot="prefix">
                  <i class="el-icon-s-flag" style="color: red"></i>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-statistic title="男女比">
                <template slot="formatter">{{ value2 }}</template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <bar-chart :chart-data="chartData" :options="customOptions" />
  </div>
</template>

<script>
import PieChart from "./PieChart.vue";
import BarChart from "./BarChart.vue";

export default {
  components: { PieChart, BarChart },
  data() {
    return {
      like: true,
      value1: null,
      value2:null,
      title: "会员总数",
      pieData: [
        { name: "男", value: null, itemStyle: { color: "#16A9FA" } },
        { name: "女", value: null, itemStyle: { color: "#FF3EC9" } },
      ],
      chartData: [],
      // 自定义配置
      customOptions: {
        title: {
          text: "会员数据统计",
          textStyle: {
            color: "#333",
            fontSize: 16,
          },
          left: "center",
        },
        yAxis: {
          name: "会员数量（人）",
        },
      },
    };
  },
  methods: {},
  created() {
    //获取男女数据显示到饼图上
    this.axios({
      method: "get",
      url: "Client/CountSex",
    })
      .then((res) => {
        console.log(res.data);
        this.pieData[0].value = res.data[0];
        this.pieData[1].value = res.data[1];
        this.value2 = res.data[0] + "/" +  res.data[1];
        this.value1 = res.data[2];
      })
      .catch((err) => {
        console.log("err: ", err);
      });
    //获取会员数据显示到柱形图上
    this.axios({
      method: "get",
      url: "Client/CountNum",
    })
      .then((res) => {
        this.chartData = res.data.data;
      })
      .catch((err) => {
        console.log("err: ", err);
      });
  },
};
</script>
<style scoped>
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>